import React, { Component } from 'react';
import $ from 'jquery';

export default class RecordForm extends Component {
    constructor() {
        super();
        this.state = {
            date: '',
            title: '',
            amount: ''
        };
    }
    valid() {
        let state = this.state;
        return state.date && state.title && state.amount;
    }
    handleChange(e) {
        var name = e.target.name;
        var key = '' + name;
        var val=e.target.value;
        var obj={};
        obj[key]=val;
        this.setState( obj);
    }
    handleSubmit(e) {
        e.preventDefault();
        let state = this.state;
        $.post('http://localhost:53000/records', { ...state }, rt => {
            this.props.handleAddRecord();
        });
    }
    render() {
        return <form className='form-inline'>
            <div className='form-group'>
                <label htmlFor="">Date:</label>
                <input type="date" className='form-control' placeholder='Date' onChange={this.handleChange.bind(this)} name='date' />
            </div>
            <div className='form-group'>
                <label htmlFor="">Title:</label>
                <input type="text" className='form-control' placeholder='Title' onChange={this.handleChange.bind(this)} name='title' />
            </div>
            <div className='form-group'>
                <label htmlFor="">Amount:</label>
                <input type="number" className='form-control' placeholder='Amount' onChange={this.handleChange.bind(this)} name='amount' />
            </div>
            <div className='form-group'>
                <button type='button' className='btn btn-primary' onClick={this.handleSubmit.bind(this)}>Create a record</button>
            </div>
        </form>
    }
}